<template>
  <el-table :data="categoryList" height="500" border style="width: 100%">
    <el-table-column align="center" prop="categoryname" label="类别名称"></el-table-column>
    <el-table-column align="center" prop="number" label="排序"></el-table-column>
    <el-table-column align="center" prop="son.length" label="子类别数量"></el-table-column>
    <el-table-column align="center" label="操作">
      <template v-slot="scope">
        <el-row>
          <el-col>
            <el-button type="primary" size="medium" @click="editCategory(scope.row.id)">编辑</el-button>
            <el-button
              type="info"
              size="medium"
              @click="$router.push({name: 'categorySon',params:{id:scope.row.id}})"
            >子类别管理</el-button>
            <el-button type="danger" size="medium" @click="delCategory(scope.row.id)">删除</el-button>
          </el-col>
        </el-row>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { delCategory, getCategoryById } from '@/api/trade'
export default {
  components: {},
  props: {
    categoryList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {}
  },
  watch: {},
  computed: {},
  methods: {
    //删除
    delCategory(id) {
      this.$confirm('是否要删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delCategory(id)
          this.$parent.getCategory()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    //编辑
    async editCategory(id) {
      this.$parent.showDialog = true
      const res = await getCategoryById(id)
      this.$emit('change', 2)
      //eventbus传参
      this.$EventBus.$emit('sendMsg', res)
    }
  },
  created() {},
  mounted() {}
}
</script>
<style scoped>
</style>
